<script setup lang="ts">
import {ref} from "vue";
import {getRechargeListApi} from "@/api/rechargeApi.ts";
import {getWithdrawListApi} from "@/api/withdrawApi.ts";

const type = ref(1);

const handleNav = (params:any) => {
  type.value = params;
}

const rechargeFilter = ref({
  page: 1
});
const rechargeLoading = ref(false);
const rechargeFinished = ref(false);

const recharges = ref([]);
const fetchRechargeRecordData = () => {
  rechargeLoading.value = true;

  getRechargeListApi(rechargeFilter.value).then(res => {
    if (res.data.length > 0) {
      recharges.value.push(...res.data);
      rechargeFilter.value.page += 1;
    } else {
      rechargeFinished.value = true;
    }
    rechargeLoading.value = false;
  })
}

const withdrawFilter = ref({
  page: 1
});
const withdrawLoading = ref(false);
const withdrawFinished = ref(false);

const withdraws = ref([]);
const fetchWithdrawRecordData = () => {
  withdrawLoading.value = true;

  getWithdrawListApi(withdrawFilter.value).then(res => {
    if (res.data.length > 0) {
      withdraws.value.push(...res.data);
      withdrawFilter.value.page += 1;
    } else {
      withdrawFinished.value = true;
    }
    withdrawLoading.value = false;
  })
}
</script>

<template>
  <div class="record">
    <div class="record-nav">
      <span :class="[{ 'record-nav-action': type == 1 }]" @click="handleNav(1)">{{ $t('record.recharge') }}</span>
      <span :class="[{ 'record-nav-action': type == 2 }]" @click="handleNav(2)">{{ $t('record.withdraw') }}</span>
    </div>

    <div v-if="type == 1">
      <van-list
          v-model:loading="rechargeLoading"
          :finished="rechargeFinished"
          :finished-text="$t('record.empty')"
          @load="fetchRechargeRecordData"
      >
        <div v-for="item in recharges" class="record-item">
          <div class="record-item-flex">
            <span>{{ $t('record.rechargeMoney') }}{{ item.money }}</span>
            <span>{{ $t('record.status') }}
              <van-tag type="warning" v-if="item.status == 0" size="large">{{ $t('record.wait') }}</van-tag>
              <van-tag type="success" v-if="item.status == 1" size="large">{{ $t('record.pass') }}</van-tag>
              <van-tag type="danger" v-if="item.status == 2" size="large">{{ $t('record.reject') }}</van-tag>
            </span>
          </div>
          <span>{{ $t('record.time') }}{{ item.created_at }}</span>
        </div>
      </van-list>
    </div>

    <div v-if="type == 2">
      <van-list
          v-model:loading="withdrawLoading"
          :finished="withdrawFinished"
          :finished-text="$t('record.empty')"
          @load="fetchWithdrawRecordData"
      >
        <div v-for="item in withdraws" class="record-item">
          <div class="record-item-flex">
            <span>{{ $t('record.withdrawMoney') }}{{ item.origin_money }}</span>
            <span>{{ $t('record.status') }}
              <van-tag type="warning" v-if="item.status == 0" size="large">{{ $t('record.wait') }}</van-tag>
              <van-tag type="success" v-if="item.status == 1" size="large">{{ $t('record.pass') }}</van-tag>
              <van-tag type="danger" v-if="item.status == 2" size="large">{{ $t('record.reject') }}</van-tag>
            </span>
          </div>
          <div class="record-item-flex">
            <span>{{ $t('record.withdrawRealMoney') }}{{ item.money }}</span>
            <span>{{ $t('record.withdrawFee') }}{{ item.withdraw_fee }}%</span>
          </div>
          <div v-if="item.remark != ''">{{ $t('record.remark') }}{{ item.remark }}</div>
          <div class="record-item-flex">
            <span>
              {{ $t('record.time') }}{{ item.created_at }}
            </span>
            <span>{{ $t('record.withdrawType') }}
              <van-tag type="primary" v-if="item.type == 'bankCard'" size="large">{{ $t('record.bankCard') }}</van-tag>
              <van-tag type="danger" v-if="item.type == 'usdt'" size="large">{{ $t('record.usdt') }}</van-tag>
            </span>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "../../less/record.less";
</style>